import React, {useState, useEffect} from 'react';
import styled from 'styled-components';
import {Table, Tag, Space, Switch, message} from 'antd';
import OperaModal from '../../../components/OperaModal';
import axios from '../../../http/axios';
import {addKey} from '../../../components/TableAddKey';
const Wrapper = styled.div``;

export default function WorkBenchTable(props) {
  const [table, settable] = useState();
  const {fatherdata, updata} = props; //查看
  const [visible, setVisible] = useState({
    openModal: false,
    btnEvent: '',
    editdata: '',
    msg: '',
  });
  const [page, setPage] = useState({
    total_count: 0, // 总页数
    page_no: 1, // 当前页码
    page_size: 100, // 每页数据条数
  });
  const getlist = () => {
    axios({
      method: 'GET',
      url: '/room/queryAllRooms',
      params: {},
    })
      .then((res) => {
        console.log(res);
        settable(addKey(res.data.data));
      })
      .catch((err) => {});
  };
  useEffect(() => {
    getlist();
  }, []);
  useEffect(() => {
    console.log(updata, '更新');
    if (updata) {
      getlist();
    }
  }, [updata]);
  const columns = [
    {
      title: '房间id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '房间号',
      dataIndex: 'room_address',
      key: 'room_address',
      render: (text) => <Tag key={Math.random}>{text}</Tag>,
    },
    {
      title: '房间名',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '房间使用状态',
      dataIndex: 'shelf_status',
      key: 'shelf_status',
      render: (text, record) => (
        <Switch
          checkedChildren="上架"
          unCheckedChildren="下架"
          defaultChecked={record.shelf_status}
          onClick={() => DishStatusChange(record)}
        />
      ),
    },
    {
      title: '房间图',
      dataIndex: 'room_img',
      key: 'room_img',
      render: (tu) => <img style={{width: '100px'}} src={tu} />,
    },
    {
      title: '房间价格',
      dataIndex: 'room_price',
      key: 'room_price',
      render: (text) => <Tag>{text}</Tag>,
    },
    {
      title: '房间标签',
      key: 'tags',
      dataIndex: 'tags',
      // render: (tags) => (
      //   <>
      //     {JSON.parse(tags).map((tag) => {
      //       return (
      //         <Tag color="#65dad5" key={tag}>
      //           {tag}
      //         </Tag>
      //       );
      //     })}
      //   </>
      // ),
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 300,
      render: (text, record) => (
        <Space size="middle">
          <a onClick={() => fatherdata(record, 'edit')}>修改</a>
          <a onClick={() => opreAction(record.id, 'roomDelete')}>删除</a>
        </Space>
      ),
    },
  ];
  const opreAction = (id, btn) => {
    console.log(id, btn);
    return setVisible(() => {
      return {
        openModal: true,
        btnEvent: btn,
        editdata: id,
        msg: '确认删除此房间?',
      };
    });
  };
  const data = [
    {
      key: '1',
      roomId: 1,
      roomNum: 'John Brown',
      age: 0,
      address: 'New York No. 1 Lake Park',
      tags: ['温馨', '舒适'],
      roomName: '点睛·温泉家庭房',
      price: '8888',
    },
    {
      key: '2',
      roomNum: 'Jim Green',
      age: 1,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      roomNum: 'Joe Black',
      age: 1,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
    {
      key: '4',
      name: 'Joe Black',
      age: 1,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
    {
      key: '5',
      name: 'Joe Black',
      age: 1,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
    {
      key: '6',
      name: 'Joe Black',
      age: 1,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
    {
      key: '7',
      name: 'John Brown',
      age: 1,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '8',
      name: 'Jim Green',
      age: 1,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '9',
      name: 'Joe Black',
      age: 1,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
    {
      key: '10',
      name: 'Joe Black',
      age: 1,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
    {
      key: '11',
      name: 'Joe Black',
      age: 1,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
    {
      key: '12',
      name: 'Joe Black',
      age: 1,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ];
  const onChange = (page, pageSize) => {
    console.log(page, pageSize);
  };
  const getTableList = () => {
    console.log('getTableList');
  };
  const closeModalFn = (e) => {
    //删除房间
    console.log(visible);
    if (e === 'roomDelete') {
      axios({
        method: 'POST',
        url: '/room/deleteRoom',
        data: {roomId: visible.editdata},
      })
        .then((res) => {
          message.success(res.message);
          fatherdata();
          getlist();
          console.log(res);
        })
        .catch((err) => {});
      console.log('删除');
    }
    return setVisible(() => {
      return {
        openModal: '',
        btnEvent: '',
        editdata: '',
        msg: '',
      };
    });
  };

  const DishStatusChange = (e) => {
    if (e.shelf_status === 0) {
      //上架
      axios({
        method: 'POST',
        url: '/room/shelfOn',
        data: {roomId: e.id},
      })
        .then((res) => {
          console.log(res);
          message.success(res.message);
          getlist();
        })
        .catch((err) => {});
    } else {
      axios({
        method: 'POST',
        url: '/room/shelfDown',
        data: {roomId: e.id},
      })
        .then((res) => {
          console.log(res);
          message.success(res.message);
          getlist();
        })
        .catch((err) => {});
    }
  };
  return (
    <Wrapper>
      <Table
        columns={columns}
        pagination={{
          position: ['bottomRight'],
          size: 'small',
          showQuickJumper: true,
          defaultCurrent: 1,
          total: page.total_count,
          pageSize: page.page_size,
          current: page.page_no,
          showSizeChanger: true,
          showTotal: (total) => `共${total}条`,
          onChange: (pageNo, pageSize) => getTableList(pageNo, pageSize),
        }}
        dataSource={table}
        scroll={{x: 1500, y: 500}}
      />
      <OperaModal
        visible={visible.openModal}
        btnEvent={visible.btnEvent}
        editdata={visible.editdata}
        msg={visible.msg}
        closeModalFn={closeModalFn}
      />
    </Wrapper>
  );
}
